<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/font_3221000_rlj3kw12sf.css">
  <link rel="stylesheet" href="./xzui.css">
</head>

<body>
  <div id="root">
    <nav-bar :title="title2"></nav-bar>
    <xiaozhi :state="false" ref="a"></xiaozhi>
    <xiaozhi :state="false" ref="b"></xiaozhi>
    <xiaozhi :state="false" ref="c"></xiaozhi>
    <xiaozhi :state="false" ref="d"></xiaozhi>
    <button @click="upFromDataFn">表单组件外面的按钮，点击请求接口</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./xzui.js"></script>
  <script>

    const vm = new Vue({
      el: "#root",
      data: {
        title2: '商品创建'
      },
      methods: {
        leftFn() {
          alert('leftFn')
        },
        rightFn() {
          alert('rightFn')
        },
        upFromDataFn() {
          console.log(this.$refs.a.fromData);
          console.log(this.$refs.b.fromData);
          console.log(this.$refs.c.fromData);
          console.log(this.$refs.d.fromData);
          alert('获取到数据了')
        }
      }
    })
  </script>
</body>

</html>